import React, { useState } from 'react'
import './DesignCreateSJ.scss'
import { Modal,Button } from 'antd';
import { PlusOutlined } from '@ant-design/icons';
import { NavLink } from 'react-router-dom'
import '../../../pages/Createteam/Createteam.css';
import ButtonTab from '../../CreateteamCon/CreateteamButton/index';
import CCC from '../../CreateteamCon/Createteamzdybom/index'
const Index: React.FC = () => {
    
      //自定义按钮开关
  const [open, setOpen] = React.useState<boolean>(false);
  const [loading, setLoading] = React.useState<boolean>(true);

  const showLoading = () => {
    setOpen(true);
    setLoading(true);

    // Simple loading mock. You should add cleanup logic in real world.
    setTimeout(() => {
      setLoading(false);
    }, 1000);
  };
    return (
        <div className='DesignCreateBox'>
            <div className="DesignCreateLeft">
                <h2>创建设计</h2>
                <div className="DesignCreateLeft1">
                    <button onClick={showLoading} className='DesignCreateBtn'>
                        <PlusOutlined /> 开始设计
                    </button>
                    {/* 创建设计弹出的内容*/}
                     <div>
        <Modal
          title={<p>自定义尺寸</p>}
          loading={loading}
          open={open}
          footer={null}
          onCancel={() => setOpen(false)}
          width={'900px'}
        >
          <div className='xxx'>
            <div className='zdycc'>
              <input type="number" placeholder='宽' />
              <p>×</p>
              <input type="number" placeholder='高' />
              <select name="" id="">
                <option value="">px</option>
                <option value="">cm</option>
                <option value="">mm</option>
                <option value="">in</option>
              </select>
              <Button type='primary'>创建设计</Button>
            </div>
            <div className='zdytab'>
              <ButtonTab></ButtonTab>
            </div>
            <div className='ccc'>
              <CCC></CCC>
            </div>
          </div>

        </Modal>
      </div>
                </div>
            </div>
            <div className="DesignCreateCen">
                <h2>图片编辑</h2>
                <div className="DesignCreateCen1">
                    <NavLink to={''}> <img src="http://pub-cdn-oss.chuangkit.com/ad_position/c50b19c6e34041b992bf9e9488ff18e4" alt="" /><p>智能抠图</p></NavLink>
                    <NavLink to={''}> <img src="http://pub-cdn-oss.chuangkit.com/ad_position/701397578fc5416fb5d31eef8ad61707" alt="" /><p>AI去水印</p></NavLink>
                    <NavLink to={''}> <img src="http://pub-cdn-oss.chuangkit.com/ad_position/bb7547278b4e48e49557c2dd07124896" alt="" /><p>图片变清晰</p></NavLink>
                    <NavLink to={''}> <img src="http://pub-cdn-oss.chuangkit.com/ad_position/da04e2d1e4594c348c831935345c1ab9" alt="" /><p>图片批处理</p></NavLink>
                    <NavLink to={''}> <img src="http://pub-cdn-oss.chuangkit.com/ad_position/b6e95205172440c38770ebb0246b88e6" alt="" /><p>智能消除</p></NavLink>
                    <NavLink to={''}> <img src="http://pub-cdn-oss.chuangkit.com/ad_position/703b85cef6124096b830b6b464d9a50a" alt="" /><p>智能改图</p></NavLink>
                    <div className="DesignCreateCen2">
                        <div className="DesignCreateCenOne">
                            <NavLink to={''}> <img src="http://pub-cdn-oss.chuangkit.com/ad_position/33135869aef042219c0dfe7f453a275b" alt="" /><p>智能外拓</p></NavLink>
                            <NavLink to={''}> <img src="http://pub-cdn-oss.chuangkit.com/ad_position/556928d043184274924795d5a9f74554" alt="" /><p>图片编辑</p></NavLink>
                            <NavLink to={''}> <img src="http://pub-cdn-oss.chuangkit.com/ad_position/26fb6d9f4a524615aba4f1d0269a980a" alt="" /><p>图片翻译</p></NavLink>
                            <NavLink to={''}> <img src="http://pub-cdn-oss.chuangkit.com/ad_position/c632292c580c4a588b0450db173e98bf" alt="" /><p>无损改尺寸</p></NavLink>
                            <NavLink to={''}> <img src="http://pub-cdn-oss.chuangkit.com/ad_position/f4bea88f3cbb4a32bf4b6d41859310e2" alt="" /><p>批量设计</p></NavLink>
                        </div>
                    </div>
                </div>


            </div>
            <div className="DesignCreateRight">
                <h2>AI创作</h2>
                <div className="DesignCreateRight1">
                    <NavLink to={''}> <img src="http://pub-cdn-oss.chuangkit.com/ad_position/55bd4c8856984b6d9a2c26f32d37244d" alt="" /><p>AI拼图</p></NavLink>
                    <NavLink to={''}> <img src="http://pub-cdn-oss.chuangkit.com/ad_position/c22e6fbfc79e4e2482a79a25d7654409" alt="" /><p>智能设计</p></NavLink>
                    <NavLink to={''}> <img src="http://pub-cdn-oss.chuangkit.com/ad_position/2b6034d62f2942078b4f711324c6b6b8" alt="" /><p>一句话设计</p></NavLink>
                    <NavLink to={''}> <img src="http://pub-cdn-oss.chuangkit.com/ad_position/d28b49b6f8b94a5883c496c4abbf48ba" alt="" /><p>AI商品图</p></NavLink>
                    <NavLink to={''}> <img src="http://pub-cdn-oss.chuangkit.com/ad_position/dd0cf68008674246938fb1a0174798cb" alt="" /><p>AI文案</p></NavLink>
                    <NavLink to={''}> <img src="http://pub-cdn-oss.chuangkit.com/ad_position/e8295e9d5e38414aa4d4fe5f2f5e61dd" alt="" /><p>AI生成图</p></NavLink>
                    <div className="DesignCreateRight2">
                        <div className="DesignCreateOne">
                            <NavLink to={''}> <img src="http://pub-cdn-oss.chuangkit.com/ad_position/841c558630c441ba916405e88c810725" alt="" /><p>文生素材</p></NavLink>
                            <NavLink to={''}> <img src="http://pub-cdn-oss.chuangkit.com/ad_position/abb9c120fa684d9983d2171c75a5ab25" alt="" /><p>AI图生图</p></NavLink>
                            <NavLink to={''}> <img src="http://pub-cdn-oss.chuangkit.com/ad_position/b257f52f8a4f40b084e3d19fbbff2521" alt="" /><p>文生背景</p></NavLink>
                            <NavLink to={''}> <img src="http://pub-cdn-oss.chuangkit.com/ad_position/84107f0e502a45eeb6b521504cacff37" alt="" /><p>文生绘本</p></NavLink>
                            <NavLink to={''}> <img src="http://pub-cdn-oss.chuangkit.com/ad_position/b253a3cd21d84713ab4cfd1b0807e052" alt="" /><p>文生人物</p></NavLink>
                            <NavLink to={''}> <img src="http://pub-cdn-oss.chuangkit.com/ad_position/b340f2182c8646aeb286e5a3f1607034" alt="" /><p>线稿上色</p></NavLink>
                            <NavLink to={''}> <img src="http://pub-cdn-oss.chuangkit.com/ad_position/c1490243a8d449478a53854366a55c77" alt="" /><p>姿势识别</p></NavLink>
                            <NavLink to={''}> <img src="http://pub-cdn-oss.chuangkit.com/ad_position/b7c390ba5b234174ad5cf975bb897b33" alt="" /><p>AI照改漫</p></NavLink>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    )
}

export default Index